<!DOCTYPE html>
<html>
    <head>
        <script src="js/vue.js"></script>
        <script src="js/vuex.js"></script>
    </head>
    <body>
        <div id="app">
            <h2>列表查询</h2>
            <input type="text" v-model="id">
            <button @click="search">搜索</button>
            <p>搜索结果：{{this.$store.getters.search}}</p>
            <h4>原始数据列表</h4>
            <ul>
                <li v-for="item in this.$store.state.todos">{{item}}</li>
            </ul>
        </div>
        <script>
            const store = new Vuex.Store({
                state : {
                    todos : [
                        {id:1,text:'列表项1'},
                        {id:2,text:'列表项2'}
                    ],
                    id : 0
                },
                mutations: {
                    search(state,id) {
                        state.id = id;
                    }
                },
                getters : {
                    search : state => {
                        return state.todos.filter(todo => todo.id==state.id);
                    }
                }
            })

            var vm = new Vue({
                el:'#app',
                data : { id : '' },
                store,
                methods : {
                    search() {
                        this.$store.commit('search',this.id);
                    }
                }
            })
        </script>
    </body>
</html>